<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="../bootstrap/js/jquery-3.5.1.js"></script>
    <script src="../js/lib/jquery-1.10.2.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
<div class="container-fluid" style="margin-top: 20px">
    <form id="form-like">
    <div class="row">
        <div class="col-md-4 ">
            <div class="form-group">
                <label for="" class="col-sm-3 control-label">姓名</label>
                <div class="col-sm-9">
                    <input name="name" class="form-control"  placeholder="姓名">
                </div>
            </div>
        </div>
        <div class="col-md-4 ">
            <div class="form-group">
                <label class="col-sm-3 control-label">电话</label>
                <div class="col-sm-9">
                    <input name="tel" class="form-control"  placeholder="电话">
                </div>
            </div>
        </div>
        <div class="col-md-4 ">
            <div class="form-group">
                <label for="" class="col-sm-3 control-label">保险类型</label>
                <div class="col-sm-9">
                    <input name="intention" class="form-control"  placeholder="保险类型">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 ">
            <div class="form-group">
                <label for="" class="col-sm-3 control-label">咨询顾问</label>
                <div class="col-sm-9">
                    <input name="uid" class="form-control"  placeholder="咨询顾问">
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="col-md-3 col-md-offset-9" style="text-align: right">
            <input id="btn-like" type="button" class="btn btn-warning" value="查询"/>
            <button type="button" id="modal-zr" class="btn btn-warning" data-toggle="modal" data-target="#myModal1">转让</button>
        </div>
    </div>
    </form>



    <div class="row" style="margin-top: 20px">
        <div class="col-md-12">
            <table id="tab-show" class="table table-striped" style="width: 90%;text-align: center" align="center">
                <tr style="font-weight: 700">
                    <td>
                        <label>
                            <input type="checkbox" value="" class="ckall" onclick="checkall(this)">
                        </label>
                    </td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>手机号</td>
                    <td>公司</td>
                    <td>投保产品</td>
                    <td>咨询顾问</td>
                    <td>操作</td>
                </tr>
<!--                <tr>-->
<!--                    <td>-->
<!--                        <label>-->
<!--                            <input type="checkbox" value="">-->
<!--                        </label>-->
<!--                    </td>-->
<!--                    <td>张三</td>-->
<!--                    <td>男</td>-->
<!--                    <td>13200000000</td>-->
<!--                    <td>清华大学</td>-->
<!--                    <td>教育年金保险</td>-->
<!--                    <td>八戒</td>-->
<!--                    <td>-->
<!--                        <button data-toggle="modal" data-target="#myModal2" type="button" class="btn btn-primary">转让</button>-->
<!--                    </td>-->
<!--                </tr>-->

            </table>
        </div>
    </div>




    <!-- 单个转让 begin -->
    <!-- Modal -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >转让客户</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-3">接收咨询顾问工号</div>
                            <div class="col-sm-9">
                                <input id="take-uid" class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="but-zr" class="btn btn-primary btn-one-zr">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 当个转让 end -->
    <!-- 批量转让 begin -->
    <!-- Modal -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >转让客户</h4>
                </div>
                <div class="modal-body">
                    <table id="zr-show" class="table">
<!--                        <tr>-->
<!--                            <td>姓名</td>-->
<!--                            <td>电话</td>-->
<!--                            <td>投保产品</td>-->
<!--                            <td>咨询顾问</td>-->
<!--                        </tr>-->
<!--                        <tr>-->
<!--                            <td>张三</td>-->
<!--                            <td>1320000000</td>-->
<!--                            <td>儿童险</td>-->
<!--                            <td>八戒</td>-->
<!--                        </tr>-->
                    </table>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-3">接收咨询顾问工号</div>
                            <div class="col-sm-9">
                                <input id="take-zr" class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="but-zrs" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 批量转让 end -->

</div>
<script type="text/javascript">


    $("#btn-like").click(function () {

        $("#tab-show").children().remove()
        $("#tab-show").append("<tr style=\"font-weight: 700\">" +
            "<td>" +
            "<label>\n" +
            "   <input type=\"checkbox\" value='' onclick='checkall(this)'>" +
            "</label>" +
            "</td>" +
            "<td>姓名</td>" +
            "<td>性别</td>" +
            "<td>手机号</td>" +
            "<td>公司</td>" +
            "<td>投保产品</td>" +
            "<td>咨询顾问</td>" +
            "<td>操作</td>" +
            "</tr>")

        $.ajax({
            url:"/customer/likeAll",
            data:$("#form-like").serialize(),
            type:"post",
            dataType: "json",
            success:function (result) {
                if(result.state==2000){

                    for(let list of result.data ){
                        let sex;
                        if(list.sex==0){
                            sex="女";
                        }else {
                            sex="男";
                        }

                        $("#tab-show").append("<tr cid='"+list.id+"'>" +
                            "<td>\n" +
                            "<label>\n" +
                            "<input type='checkbox' value='' class='ckitem' >\n" +
                            " </label>" +
                            "</td>" +
                            "<td>"+list.name+"</td>" +
                            "<td>"+sex+"</td>" +
                            "<td>"+list.tel+"</td>" +
                            "<td>"+list.company+"</td>" +
                            "<td>"+list.intention+"</td>" +
                            "<td>"+list.uid+"</td>" +
                            "<td>" +
                            " <button data-toggle=\"modal\" data-target=\"#myModal2\" type=\"button\" class='btn btn-primary zr'>转让</button>\n" +
                            "</td>" +
                            "</tr>")
                    }

                    $(".zr").click(function () {
                        let cid=$(this).parents("tr").attr("cid")
                        let a=[];
                        a.push(cid)
                        $("#but-zr").click(function () {
                            let zrUid=$("#take-uid").val()
                            if(isNaN(zrUid)){
                                alert("请输入正确的员工工号，提示：员工工号为数字类型");
                                return;
                            }
                            $.ajax({
                                url:"/customer/upByArrayCid?arr="+a+"&uid="+$("#take-uid").val(),
                                type:"post",
                                dataType:"json",
                                success:function (result) {
                                    if(result.state==2000){
                                        alert("转让成功")
                                        location.reload(false)
                                    }else {
                                        alert(result.message)
                                    }
                                }
                            })
                        })

                    })




                }else {
                    alert(result.message)
                }
            }
        })
    })

    function checkall(ckbtn) {

        $(".ckitem").prop("checked", $(ckbtn).prop("checked"));
        console.log("全选："+$(ckbtn).prop("checked"));
    }

    function addZr(arr) {
        $("#zr-show").children().remove();
        $("#zr-show").append("<tr>" +
            "<td>姓名</td>" +
            "<td>电话</td>" +
            "<td>投保产品</td>" +
            "<td>咨询顾问</td>" +
            "</tr>")
        $.ajax({
            url:"/customer/arr?arr="+arr,
            type:"post",
            dataType:"json",
            success:function (result) {
                if(result.state==2000){
                    for(let list of result.data){
                        $("#zr-show").append("<tr>\n" +
                            "<td>"+list.name+"</td>\n" +
                            "<td>"+list.tel+"</td>\n" +
                            "<td>"+list.intention+"</td>\n" +
                            "<td>"+list.uid+"</td>\n" +
                            "</tr>")
                    }

                }else {
                    alert(result.message)
                }
            }
        })
    }

    $("#modal-zr").click(function () {

        let arr=[];
        let length=$("input:checked").length;
        let array=$("input:checked")

        console.log(length)
        for(let i=0;i<length;i++){
            let cid=$(array[i]).parents("tr").attr("cid")
            console.log("cid="+cid)
            if(cid!=null){
                arr.push(cid)
            }

        }
        // console.log("arr="+arr)
        addZr(arr)
        $("#but-zrs").click(function () {
            let zrUid=$("#take-zr").val()
            if(isNaN(zrUid)){
                alert("请输入正确的员工工号，提示：员工工号为数字类型");
                return;
            }
                $.ajax({
                    url:"/customer/upByArrayCid?arr="+arr+"&uid="+$("#take-zr").val(),
                    type:"post",
                    dataType:"json",
                    success:function (result) {
                        if(result.state==2000){
                            alert("转让成功")
                            location.reload(false)
                        }else {
                            alert(result.message)
                        }
                    }
                })

        })


    })


</script>

</body>
</html>